---
id: icon_button
title: IconButton
sidebar_label: IconButton
---

IconButtons are versatile clickable elements that can be used in various parts of the interface. They support multiple sizes, shapes, and can be either filled or presented as ghost buttons.

## Usage

To use the `IconButton`, import it from your components and pass the required props such as `size`, `variant`, `shape`, `disabled`, `toggled`, and `onClick`.

import CodeSample from "../../src/CodeSample";
import CodeBlock from "@theme/CodeBlock";

## Basic IconButton

A simple icon button with minimal configuration.

import IconButtonBasicDemo from '../../samples/components/icon_button/icon_button_basic';
import IconButtonBasicSource from '!!raw-loader!../../samples/components/icon_button/icon_button_basic';

<CodeSample>
    <IconButtonBasicDemo/>
</CodeSample>

<CodeBlock language="tsx">{IconButtonBasicSource}</CodeBlock>

## IconButton Sizes

Demonstrates how to use different sizes for the IconButton component.

import IconButtonSizeDemo from '../../samples/components/icon_button/icon_button_sizes';
import IconButtonSizeSource from '!!raw-loader!../../samples/components/icon_button/icon_button_sizes';

<CodeSample>
    <IconButtonSizeDemo/>
</CodeSample>

<CodeBlock language="tsx">{IconButtonSizeSource}</CodeBlock>

## IconButton Shapes

Illustrating how to use different shapes (circular or square) for the IconButton component.

import IconButtonShapeDemo from '../../samples/components/icon_button/icon_button_shapes';
import IconButtonShapeSource from '!!raw-loader!../../samples/components/icon_button/icon_button_shapes';

<CodeSample>
    <IconButtonShapeDemo/>
</CodeSample>

<CodeBlock language="tsx">{IconButtonShapeSource}</CodeBlock>

## IconButton Variants

Showing the different variants (ghost or filled) available for styling the IconButton.

import IconButtonVariantDemo from '../../samples/components/icon_button/icon_button_variants';
import IconButtonVariantSource from '!!raw-loader!../../samples/components/icon_button/icon_button_variants';

<CodeSample>
    <IconButtonVariantDemo/>
</CodeSample>

<CodeBlock language="tsx">{IconButtonVariantSource}</CodeBlock>